<template>
  <div class="homeDistributeProduct layout">
    <!-- 产品列表 -->
    <div class="product-list">
      <template v-for="(item,index) in Productitems">
        <div class="list clearfix" :key="index">
          <div class="pImg fl">
           <img class="pImg" src="../../assets/imgs/pdetail1.png" alt="">
           </div>
         <div class="pInfo fl">
           <p>{{item.productName}}</p>
           <p><span class="now-price">¥{{item.productPrice}}</span>
           <!-- <span class="primary-price">¥388.33</span> -->
           </p>
           <p class="plan">产品描述: <span>{{item.productInfo}}</span> </p>
            <el-button v-if="userInfo.level===2 ||userInfo.level===3"  size="small" type="warning" class="stages-btn">已分销</el-button>
            <el-button v-else @click="goBuy(item.productID)" size="small" type="danger" class="stages-btn">购买</el-button>
         </div>
        </div>
        </template>
    </div>
  </div>
</template>

<script>
export default {
  created () {
    this.userInfo = this.$store.state.user
    console.log(this.userInfo)
    //  获取首页产品信息
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiProduct/getProductInfo.shtml', this.user, {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      emulateJSON: true
    }).then((data) => {
      this.Productitems = data.body.productList
    }, (ne) => {
      this.$message({
        message: '网络错误',
        type: 'error',
        duration: 1000,
        showClose: false
      })
    })
  },
  data () {
    return {
      Productitems: [],
      user: {token: this.$store.state.token},
      userInfo: {}
    }
  },
  methods: {
    goBuy (id) {
      window.localStorage.setItem('Pid', id)
      this.$router.push('/shopping/purchaseMenu')
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss" >
.homeDistributeProduct{
   font-size: 12px;
    .search{
    padding:13px 0;
    background-color:#F6F6F6;
    height: 98px;
      .search-name{
        width: 70%;
        display: block;
        margin: 0 auto;
        margin-bottom: 5px;
      }
      .searchcontainer{
        width: 70%;
        margin: 0 auto;
        .search-group{
          width: 25%;
          margin-right: 1.5%;
        }
        .search-btn{
          width: 20%;
        }
        .search-end{
          margin-right: 2%;
        }
      }

      input{
         font-size: 12px;
         padding: 3px 8px;
       }
    }
      .sort{
        width: 70%;
        height: 34px;
        margin-left: -4px;
        position: relative;
        left: 48%;
        transform:translateX(-50%);
      li{
        height: 34px;
        line-height: 25px;
        list-style: none;
        float: left;
        width: 20%;
        padding: 5px;
      }
      li:not(.nosort){
        position: relative;
      }
      .caret-wrapper{
          position: absolute;
          margin-left: 1px;
          width: 16px;
          height: 30px;
          left: 34px;
          top: 2px;
          overflow: initial;
      }
      .ascending{
        position: absolute;
        top: 9px;
        border-top: none;
        border-bottom: 5px solid #000;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
      }
      .descending {
        position: absolute;
        bottom: 9px;
        border-top: 5px solid #000;
        border-bottom: none;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
      }
    }


  .product-list{
    background-color: #F6F6F6;
    margin-bottom: 60px;
    .list{
      background-color: #fff;
      margin-bottom: 10px;
      padding: 25px 11px;
      text-align: left;
      position: relative;
        .pImg{
          width:98px;
          height: 78px;
          overflow: hidden;
          }
        .pInfo{
          margin-left: 10px;
          width:50%;
          .primary-price{
            text-decoration:line-through;
            color:#989898;
          }
          .now-price{
            color:#ff4949;
          }
          .stages-btn{
            position: absolute;
            right: 20px;
            bottom: 18px;
          }
          .plan{
            line-height:17px;
            font-size: 14x;
            color:#989898;
            }
        }


    }

  }
}
</style>
